<template>
  <div>
    <div class="Options">
      <div class="Option" @click="toAlert">
        <img src="../../assets/校园安全管理系统/notifications_on.png" style="width: 20px; height: 20px">
        <span>查看预警</span>
      </div>
      <div class="Option" @click="open">
        <img src="../../assets/校园安全管理系统/404监控、摄像头.png" style="width: 20px; height: 20px">
        <span>查看监控</span>
      </div>
      <div class="Option" @click="toFiling">
        <img src="../../assets/校园安全管理系统/resume.png" style="width: 20px; height: 20px">
        <span>查看申请</span>
      </div>
      <div class="Option">
        <img src="../../assets/校园安全管理系统/404监控、摄像头.png" style="width: 20px; height: 20px">
        <span>查看监控</span>
      </div>
      <div class="Option">
        <img src="../../assets/校园安全管理系统/404监控、摄像头.png" style="width: 20px; height: 20px">
        <span>查看监控</span>
      </div>
      <div class="Option">
        <img src="../../assets/校园安全管理系统/404监控、摄像头.png" style="width: 20px; height: 20px">
        <span>查看监控</span>
      </div>
      <div class="Option">
        <img src="../../assets/校园安全管理系统/404监控、摄像头.png" style="width: 20px; height: 20px">
        <span>查看监控</span>
      </div>
      <div class="Option">
        <img src="../../assets/校园安全管理系统/我们.png" style="width: 20px; height: 20px">
        <span>关于我们</span>
      </div>
    </div>
   </div>
</template>

<script>
import router from "../../router";
import { ElMessage, ElMessageBox } from 'element-plus'
import {UserInfoStore} from "../../stores/csms";
export default {
  name: "Aside",
  components: {
  },
  /**
   * vue2对应的element-ui的实现方式
   * @returns {{open: open}}
   */
  // methods:{
  //   open(){
  //     this.$confirm("您暂未拥有查看监控权限，是否申请？", {
  //       confirmButtonText:'确定',
  //       cancelButtonText:'取消',
  //       type:"info"
  //     }).then(()=>{
  //       router.replace({name:'MonitoringView'})
  //       this.$message({
  //         type:'success',
  //         message:'开始申请'
  //       })
  //     }).catch(()=>{
  //       this.$message({
  //         type:'info',
  //         message:'取消'
  //       })
  //     })
  //   }
  // },
  setup(){
    /**
     * 申请监控权限函数
     */
    function open(){
      console.log(UserInfoStore().role)
      if (UserInfoStore().role === "user"){
        ElMessageBox.confirm("您暂未拥有查看监控权限，是否申请？", {
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:"info"
        }).then(()=>{
          router.replace({name:'VerifyView'})
          ElMessage({
            type:'success',
            message:'开始申请'
          })
        }).catch(()=>{
          ElMessage({
            type:'info',
            message:'取消'
          })
        })
      }else {
        router.replace({name:"MonitoringView"})
      }
    }

    /**
     *跳转到预警信息页
     */
    function toAlert(){
      router.replace({name:'AlertView'})
    }

    /**
     * 跳转到申请信息页
     */
    function toFiling(){
      router.replace({name:'FilingView'})
    }
    return {open,toFiling, toAlert}
  }

}
</script>

<style scoped>
.Options{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.Option{
  /*background: white;*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 50px;
  margin: 5px;
  cursor: pointer;
}
.Option:hover{
  background: grey;
  border-radius: 10px;
  border: 2px red;
}
</style>